<!--
 * @name: 
 * @test: test font
 * @msg: 
 * @param: 
 * @return: 
-->
<template>
  <view style="margin-top: 40rpx">
    <uv-steps :current="step - 1" style="padding-bottom: 10rpx">
      <uv-steps-item title="商家信息"></uv-steps-item>
      <uv-steps-item title="上传资质"></uv-steps-item>
      <uv-steps-item title="确认签约"></uv-steps-item>
    </uv-steps>

    <view class="bg">
      <form @submit="formSubmit" report-submit="true">
        <view class="addAddress">
          <!--第一步-->
          <block v-if="step == 1">
            <view class="list borRadius14">
              <view
                class="item acea-row row-between-wrapper"
                style="border: none"
              >
                <view class="name">推广账号<text class="red">*</text></view>
                <input
                  type="text"
                  placeholder="请输入推广人手机号"
                  placeholder-style="color:#ccc;"
                  v-model="formData.spreadPhone"
                  placeholder-class="placeholder"
                />
              </view>

              <view
                class="item acea-row row-between-wrapper"
                style="border: none"
              >
                <view class="name">店铺名称<text class="red">*</text></view>
                <input
                  type="text"
                  placeholder="请输入店铺名称"
                  placeholder-style="color:#ccc;"
                  v-model="formData.name"
                  placeholder-class="placeholder"
                />
              </view>

              <view class="item acea-row row-between-wrapper">
                <view class="name">联系人<text class="red">*</text></view>
                <input
                  type="text"
                  placeholder="请输入联系人"
                  placeholder-style="color:#ccc;"
                  v-model="formData.contacts"
                  placeholder-class="placeholder"
                />
              </view>

              <view class="item acea-row row-between-wrapper">
                <view class="name">联系方式<text class="red">*</text></view>
                <input
                  :maxlength="11"
                  type="text"
                  placeholder="请输入联系方式"
                  placeholder-style="color:#ccc;"
                  v-model="formData.cell"
                  placeholder-class="placeholder"
                />
              </view>
              <view class="item acea-row row-between-wrapper relative">
                <view class="name">主营类目<text class="red">*</text></view>
                <view v-if="!isShopOk" class="address">
                  <picker
                    mode="multiSelector"
                    @change="bindPickerChanges"
                    @columnchange="columnchange"
                    :value="index"
                    :range="array"
                    range-key="title"
                  >
                    <view
                      v-if="formData.pidClassTitle"
                      class="uni-input picker"
                    >
                      <!-- {{title}} -->
                      {{ formData.pidClassTitle }},{{ formData.classifyTitle }}
                    </view>
                    <view v-else>请选择主营类目</view>
                  </picker>
                </view>
                <view v-else class="address">
                  {{ formData.childClass }}-{{ formData.upClass }}
                </view>
              </view>
              <view class="item acea-row">
                <view class="name">营业时间<text class="red">*</text></view>
                <view @tap="show" style="margin-left: 30rpx">
                  <text v-if="formData.jobStart">
                    {{ formData.jobStart }}-{{ formData.jobEnd }}
                  </text>
                  <text v-else style="color: #ccc">请选择营业时间</text>
                </view>
                <tpf-time-range
                  ref="time"
                  :startTime="startTime"
                  :startDefaultTime="startDefaultTime"
                  :endTime="endTime"
                  :endDefaultTime="endDefaultTime"
                  @timeRange="timeRange"
                >
                </tpf-time-range>
              </view>

              <view class="item acea-row row-between-wrapper relative">
                <view class="name">商家地址<text class="red">*</text></view>
                <view class="address" v-if="!isShopOk">
                  <picker
                    mode="multiSelector"
                    @change="bindRegionChange"
                    :value="valueRegion"
                    @columnchange="bindMultiPickerColumnChange"
                    :range="multiArray"
                  >
                    <view class="acea-row">
                      <view class="picker line1"
                        >{{ region[0] }}，{{ region[1] }}，{{ region[2] }}
                      </view>
                      <view class="iconfont icon-xiangyou abs_right"></view>
                    </view>
                  </picker>
                </view>
                <view v-else class="address">
                  {{ formData.province }}-{{ formData.city }}-{{
                    formData.area
                  }}
                </view>
              </view>
              <view class="item acea-row relative">
                <view class="name">详细地址<text class="red">*</text></view>
                <view
                  @tap="chooseLocation"
                  style="
                    display: flex;
                    color: #ccc;
                    margin-left: 30rpx;
                    overflow: hidden;
                    width: 70%;
                    height: 40px;
                  "
                >
                  <view v-if="formData.address">{{ formData.address }}</view>
                  <view v-else>请选择详细地址</view>
                  <view
                    v-if="!isShopOk"
                    class="iconfont icon-dizhi font-color abs_right"
                  ></view>
                </view>
              </view>

              <view class="item acea-row row-between-wrapper relative">
                <view class="name">店铺简介</view>
              </view>
            </view>

            <view
              class=""
              style="
                border-bottom: 0.5px solid #eee;
                padding-bottom: 10rpx;
                padding-left: 10rpx;
                margin: 0 20rpx;
              "
            >
              <textarea
                class="introduce"
                @blur="bindTextAreaBlur"
                v-model="formData.introduce"
                auto-height
                placeholder="店铺简介"
                placeholder-style="color:#ccc;font-size:30rpx"
              />
            </view>

            <button class="keepBnt bg-color" @click="nextBtn(1)">下一步</button>
          </block>

          <!-- 第二步 -->
          <block v-if="step == 2">
            <view class="addAddress step2">
              <view class="borRadius14">
                <view style="display: block">
                  <view class="item acea-row step-list">
                    <view class="name" style="margin-left: 30rpx"
                      >营业执照<text class="red">*</text>
                    </view>
                    <htz-image-upload
                      :max="1"
                      v-model="yyzzData"
                      :uploadSuccess="yyzzDataSuccess"
                      :action="uploadUrl"
                      name="multipart"
                      :headers="headers"
                    ></htz-image-upload>
                  </view>

                  <view class="item acea-row step-list">
                    <view class="name"
                      >店铺门头照<text class="red">*</text></view
                    >
                    <htz-image-upload
                      :max="1"
                      v-model="dpmtzData"
                      :uploadSuccess="dpmtzDataSuccess"
                      :action="uploadUrl"
                      name="multipart"
                      :headers="headers"
                    ></htz-image-upload>
                  </view>
                </view>

                <view style="display: block">
                  <view class="item acea-row step-list">
                    <view class="name"
                      >身份证正面<text class="red">*</text></view
                    >
                    <htz-image-upload
                      :max="1"
                      v-model="sfzzmData"
                      :uploadSuccess="sfzzmDataSuccess"
                      :action="uploadUrl"
                      name="multipart"
                      :headers="headers"
                    ></htz-image-upload>
                  </view>
                  <view class="item acea-row step-list">
                    <view class="name"
                      >身份证反面<text class="red">*</text></view
                    >
                    <htz-image-upload
                      :max="1"
                      v-model="sfzfmData"
                      :uploadSuccess="sfzfmDataSuccess"
                      :action="uploadUrl"
                      name="multipart"
                      :headers="headers"
                    ></htz-image-upload>
                  </view>
                </view>

                <view class="item acea-row step-list">
                  <view class="name">店铺实景图<text class="red">*</text></view>
                  <htz-image-upload
                    :max="3"
                    v-model="dpsjtData"
                    :imgDelete="dpsjtDelete"
                    :uploadSuccess="dpsjtDataSuccess"
                    :action="uploadUrl"
                    name="multipart"
                    :headers="headers"
                  ></htz-image-upload>
                </view>
              </view>
            </view>

            <view>
              <button class="keepBnt bg-color" @click="nextBtn(2)">
                下一步
              </button>
              <button
                class="keepBnt"
                style="background: #ccc !important"
                @click="nextBtn(0)"
              >
                上一步
              </button>
            </view>
          </block>

          <!-- 第三步 -->
          <block v-if="step == 3">
            <view class="step2">
              <view style="display: flex; margin-top: 60rpx">
                <view
                  style="width: 35%"
                  class="item acea-row row-between-wrapper relative"
                >
                  <view class="name">商家让利比例(%)</view>
                </view>
                <view style="width: 60%">
                  <view style="padding-top: 30rpx">
                    <view style="width: 90%">
                      <sliderBar
                        max="100"
                        min="0"
                        @change="changeProgress"
                      ></sliderBar>
                    </view>
                    <text>{{ formData.profit }}%</text>
                  </view>
                </view>
              </view>
            </view>

            <button
              v-show="!isShopOk"
              class="keepBnt bg-color"
              @click="nextBtn(4)"
            >
              立即保存
            </button>

            <button
              class="keepBnt"
              style="background: #ccc !important"
              @click="nextBtn(1)"
            >
              上一步
            </button>
          </block>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import store from "@/store";
import { TOKENNAME, HTTP_ADMIN_URL } from "@/config/app.js";
import { getCategoryList } from "@/api/store.js";
import sliderBar from "@/components/slider-bar/sliderBar.vue";
import { saveShop, getUserStore } from "@/api/shop.js";
import { getCity, getStoreClass } from "@/api/api.js";
import { toLogin } from "@/libs/login.js";
import { mapGetters } from "vuex";
export default {
  components: {
    sliderBar,
  },
  data() {
    return {
      // 监控问题反馈人
      index: [0, 0],
      array: [[], []],
      childArr: [], // 二级分类数据源
      title: "请先选择要求整改单位",
      multiIndexs: -1,

      headers: {
        [TOKENNAME]: store.state.app.token,
      },
      uploadUrl:
        HTTP_ADMIN_URL +
        "/api/front/user/upload/image?model=user&pid=0&typeImg=",
      categoryArr: [],
      categoryIndex: -1,
      startTime: "00:00",
      startDefaultTime: "06:00",
      endTime: "24:00",
      endDefaultTime: "06:00",
      isShopOk: false,
      formData: {
        id: "",
        spreadPhone: "",
        name: "",
        contacts: "",
        cell: "",
        classify: "",
        jobStart: "",
        jobEnd: "",
        province: "",
        area: "",
        street: "",
        address: "",
        latitude: "",
        longitude: "",
        introduce: "",
        license: "",
        idcardFront: "",
        idcardOpp: "",
        storeCover: "",
        storeImg: "",
        profit: 0,
        pidClass: "",
        classify: "",
        pidClassTitle: "",
        classifyTitle: "",
      },
      step: 1,
      yyzzData: [],
      dpmtzData: [],
      sfzzmData: [],
      sfzfmData: [],
      dpsjtData: [],

      regionDval: ["浙江省", "杭州市", "滨江区"],
      region: ["省", "市", "区"],
      valueRegion: [0, 0, 0],
      district: [],
      multiArray: [],
      multiIndex: [0, 0, 0],
      cityId: 0,
    };
  },
  computed: mapGetters(["isLogin"]),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getCityList();
        }
      },
      deep: true,
    },
  },
  onLoad(options) {
    this.getStoreClass();
    if (this.isLogin) {
      this.preOrderNo = options.preOrderNo || 0;
      this.id = options.id || 0;
      uni.setNavigationBarTitle({
        title: options.id ? "修改联盟商家" : "申请入住联盟商家",
      });
      if (this.$Cache.has("cityList")) {
        //检测城市数据是否存在缓存，有的话从缓存取，没有的话请求接口
        this.district = this.$Cache.getItem("cityList");
        this.initialize();
      } else {
        this.getCityList();
      }
    } else {
      //	toLogin();
    }
  },
  onShow() {
    this.getStore();
    //this.getCate()
  },
  methods: {
    // 获取二级分类 监控问题反馈人 二级分类
    columnchange(e) {
      // this.formData.pidClass = ""
      // this.formData.classify = ""
      // this.formData.pidClassTitle = ""
      // this.formData.classifyTitle = ""

      let categoryArr = this.categoryArr;
      let value = e.detail.value;
      // 当滚动切换一级分类时，为当前的一级分类添加它的子类
      if (e.detail.column == 0) {
        // #ifdef H5
        // 在小程序中直接赋值无效  H5 可直接赋值
        this.array[1] = this.childArr[e.detail.value];
        // #endif
        // #ifdef MP-WEIXIN
        // 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
        this.$set(this.array, 1, this.childArr[e.detail.value]);
        // #endif
        // console.log(this.childArr[e.detail.value])

        this.formData.pidClass = categoryArr[value].id;
        this.formData.pidClassTitle = categoryArr[value].title;
      }
      if (e.detail.column == 1) {
        this.formData.classify = categoryArr[value].id;
        this.formData.classifyTitle = categoryArr[value].title;
      }
    },

    // 选择任务分类 监控问题反馈人点击确认
    bindPickerChanges: function (e) {
      this.formData.pidClass = "";
      this.formData.classify = "";
      this.formData.pidClassTitle = "";
      this.formData.classifyTitle = "";

      console.log("picker发送选择改变，携带值为", e);
      let value = e.target.value;

      if (this.array[0].length != 0) {
      }
      if (this.array[1].length != 0) {
      }

      this.formData.pidClass = this.array[0][value[0]].id;
      this.formData.classify = this.array[1][value[1]].id;
      this.formData.pidClassTitle = this.array[0][value[0]].title;
      this.formData.classifyTitle = this.array[1][value[1]].title;
    },

    async getStore() {
      let that = this;
      getUserStore({})
        .then((res) => {
          if (res.code == 200 && res.data) {
            that.formData = res.data;
            that.yyzzData = res.data.license.split(",");
            that.dpmtzData = res.data.storeCover.split(",");
            that.sfzzmData = res.data.idcardFront.split(",");
            that.sfzfmData = res.data.idcardOpp.split(",");
            that.dpsjtData = res.data.storeImg.split(",");
            that.isShopOk = true;
          }
        })
        .catch((res) => {});
    },
    async getStoreClass() {
      let that = this;
      getCategoryList()
        .then((res) => {
          that.categoryArr = res.data;

          this.array[0] = res.data;

          this.childArr = this.array[0].map((item) => item.child);
          // 第一次打开时，默认给一级分类添加它的二级分类
          this.array[1] = this.childArr[0];
        })
        .catch((res) => {});
    },
    nextBtn(step) {
      let that = this;
      if (step == 1) {
        if (this.formData.spreadPhone == "") {
          return uni.showToast({
            title: "推荐账号不能为空",
            icon: "none",
          });
        }
        if (this.formData.name == "") {
          return uni.showToast({
            title: "店铺名称不能为空",
            icon: "none",
          });
        }
        if (this.formData.contacts == "") {
          return uni.showToast({
            title: "联系人不能为空",
            icon: "none",
          });
        }
        if (this.formData.cell == "") {
          return uni.showToast({
            title: "联系方式不能为空",
            icon: "none",
          });
        }
        if (this.formData.classify == "") {
          return uni.showToast({
            title: "主营业务不能为空",
            icon: "none",
          });
        }
        if (this.formData.jobStart == "") {
          return uni.showToast({
            title: "营业时间不能为空",
            icon: "none",
          });
        }
        if (this.formData.province == "") {
          return uni.showToast({
            title: "请选择商家地址",
            icon: "none",
          });
        }
        if (this.formData.address == "") {
          return uni.showToast({
            title: "请选择详细地址",
            icon: "none",
          });
        }
      }
      if (step == 2) {
        if (this.formData.license == "") {
          return uni.showToast({
            title: "请上传营业执照",
            icon: "none",
          });
        }
        if (this.formData.storeCover == "") {
          return uni.showToast({
            title: "请上店面门头图",
            icon: "none",
          });
        }
        if (this.formData.idcardFront == "") {
          return uni.showToast({
            title: "请上身份证正面",
            icon: "none",
          });
        }
        if (this.formData.idcardOpp == "") {
          return uni.showToast({
            title: "请上身份证反面",
            icon: "none",
          });
        }

        if (this.dpsjtData.length == 0) {
          return uni.showToast({
            title: "请上门店环境图",
            icon: "none",
          });
        }
        this.formData.storeImg = this.dpsjtData.join(",");
      }
      // this.formData.storeImg = _res.data.url
      if (step == 4) {
        step = step - 1;
        this.formData.type = 0;
        const _temp = JSON.parse(JSON.stringify(this.formData));
        _temp.license = _temp.license && _temp.license.split(".com/")[1];
        _temp.storeCover =
          _temp.storeCover && _temp.storeCover.split(".com/")[1];
        _temp.idcardFront =
          _temp.idcardFront && _temp.idcardFront.split(".com/")[1];
        _temp.idcardOpp = _temp.idcardOpp && _temp.idcardOpp.split(".com/")[1];
        _temp.storeImg = _temp.storeImg
          .split(",")
          .map((item) => item && item.split(".com/")[1])
          .join();
        saveShop(_temp)
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: "保存成功",
                icon: "none",
              });
              setTimeout(function () {
                uni.navigateTo({
                  url: "/pages/shop/store/submit/submit",
                });
              }, 3000);
            }
            console.log(res.code);
          })
          .catch((res) => {});
      }
      this.step = step + 1;
    },
    // 地址
    chooseLocation: function () {
      if (this.isShopOk) return;
      uni.chooseLocation({
        success: (res) => {
          this.formData.address = res.address;
          this.formData.latitude = res.latitude;
          this.formData.longitude = res.longitude;
          console.log(res);
          this.$set(
            this.userAddress,
            "detail",
            res.address.replace(/.+?(省|市|自治区|自治州|县|区)/g, "")
          );
        },
      });
    },
    // #ifdef APP-PLUS
    // 获取选择的地区
    handleGetRegion(region) {
      this.region = region;
    },
    // #endif
    // 获取地址数据
    getCityList: function () {
      let that = this;
      getCity().then((res) => {
        this.district = res.data;
        let oneDay = 24 * 3600 * 1000;
        // this.$Cache.set('cityList', JSON.stringify(res.data)); //设置不过期时间的方法
        this.$Cache.setItem({
          name: "cityList",
          value: res.data,
          expires: oneDay * 7,
        }); //设置七天过期时间
        that.initialize();
      });
    },
    initialize: function () {
      let that = this,
        province = [],
        city = [],
        area = [];
      console.log(that.district);
      if (that.district.length) {
        let cityChildren = that.district[0].child || [];
        let areaChildren = cityChildren.length
          ? cityChildren[0].child || []
          : [];
        that.district.forEach(function (item) {
          province.push(item.name);
        });
        console.log();
        cityChildren.forEach(function (item) {
          city.push(item.name);
        });
        areaChildren.forEach(function (item) {
          area.push(item.name);
        });
        this.multiArray = [province, city, area];
      }
    },
    bindRegionChange: function (e) {
      let multiIndex = this.multiIndex,
        province = this.district[multiIndex[0]] || {
          child: [],
        },
        city = province.child[multiIndex[1]] || {
          cityId: 0,
        },
        multiArray = this.multiArray,
        value = e.detail.value;
      this.region = [
        multiArray[0][value[0]],
        multiArray[1][value[1]],
        multiArray[2][value[2]],
      ];

      const _curentItem = this.district[multiIndex[0]];
      const _cldrenItem = _curentItem.child[multiIndex[1]];
      this.formData.provinceId = _curentItem.cityId;
      this.formData.cityId = _cldrenItem.cityId;
      if (multiIndex[2]) {
        const trreeItem = _cldrenItem.child[multiIndex[2]];
        this.formData.areaId = trreeItem.cityId;
      }

      this.formData.province = this.region[0];
      this.formData.city = this.region[1];
      this.formData.area = this.region[2];
      this.cityId = city.cityId;
      this.valueRegion = [0, 0, 0];
      this.initialize();
    },
    bindMultiPickerColumnChange: function (e) {
      let that = this,
        column = e.detail.column,
        value = e.detail.value,
        currentCity = this.district[value] || {
          child: [],
        },
        multiArray = that.multiArray,
        multiIndex = that.multiIndex;
      multiIndex[column] = value;
      switch (column) {
        case 0:
          let areaList = currentCity.child[0] || {
            child: [],
          };
          multiArray[1] = currentCity.child.map((item) => {
            return item.name;
          });
          multiArray[2] = areaList.child.map((item) => {
            return item.name;
          });
          break;
        case 1:
          let cityList =
            that.district[multiIndex[0]].child[multiIndex[1]].child || [];
          multiArray[2] = cityList.map((item) => {
            return item.name;
          });
          break;
        case 2:
          break;
      }
      // #ifdef MP || APP-PLUS
      this.$set(this.multiArray, 0, multiArray[0]);
      this.$set(this.multiArray, 1, multiArray[1]);
      this.$set(this.multiArray, 2, multiArray[2]);
      // #endif
      // #ifdef H5
      this.multiArray = multiArray;
      // #endif
      this.multiIndex = multiIndex;
      // this.setData({ multiArray: multiArray, multiIndex: multiIndex});
    },

    // 地址 end

    changeProgress(e) {
      console.log(e);
      this.formData.profit = e;
    },
    show() {
      this.$refs["time"].open();
    },
    timeRange(e) {
      this.formData.jobStart = e[0];
      this.formData.jobEnd = e[1];
      if (e[2] == "cancel") {
        this.formData.jobStart = "";
        this.formData.jobEnd = "";
      }
    },
    bindPickerChange: function (e) {
      let index = e.detail.value;
      this.categoryIndex = index;
      this.formData.classify = this.categoryArr[index].id;
    },
    yyzzDataSuccess(res) {
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        this.formData.license = _res.data.url;
        return {
          success: true,
          url: _res.data.url,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    dpmtzDataSuccess(res) {
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        this.formData.storeCover = _res.data.url;
        return {
          success: true,
          url: _res.data.url,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    sfzzmDataSuccess(res) {
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        this.formData.idcardFront = _res.data.url;
        return {
          success: true,
          url: _res.data.url,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    sfzfmDataSuccess(res) {
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        this.formData.idcardOpp = _res.data.url;
        return {
          success: true,
          url: _res.data.url,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    dpsjtDataSuccess(res) {
      var _res = JSON.parse(res.data);
      if (_res.code == 200) {
        return {
          success: true,
          url: _res.data.url,
        };
      } else {
        return {
          success: false,
          url: "",
        };
      }
    },
    dpsjtDelete(obj) {
      console.log(obj);
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #fff !important;
}

.bg {
  background: #f6f6ff;
  padding-top: 20rpx;
}

.addAddress {
  margin-top: 20rpx;
  background-color: #fff;
}

.addAddress .list {
  background-color: #fff;
  padding: 0 24rpx;
}

.addAddress .list .item {
  border-top: 1rpx solid #eee;
  height: 90rpx;
  line-height: 90rpx;
}

.addAddress .list .item .name {
  // width: 195rpx;
  font-size: 30rpx;
  color: #333;
}

.addAddress .list .item .address {
  flex: 1;
  margin-left: 50rpx;
}

.addAddress .list .item input {
  width: 475rpx;
  font-size: 30rpx;
  font-weight: 400;
}

.addAddress .list .item .placeholder {
  color: #ccc;
}

.addAddress .list .item picker .picker {
  width: 410rpx;
  font-size: 30rpx;
}

.addAddress .default {
  padding: 0 30rpx;
  height: 90rpx;
  background-color: #fff;
  margin-top: 23rpx;
}

.addAddress .default checkbox {
  margin-right: 15rpx;
}

.addAddress .keepBnt {
  width: 690rpx;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 80rpx auto 24rpx auto;
  font-size: 32rpx;
  color: #fff;
}

.addAddress .wechatAddress {
  width: 690rpx;
  height: 86rpx;
  border-radius: 50rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 0 auto;
  font-size: 32rpx;
  color: #5189ea;
  border: 1px solid #5189ea;
}

.relative {
  position: relative;
}

.icon-dizhi {
  font-size: 44rpx;
  z-index: 11;
}

.abs_right {
  position: absolute;
  right: 0;
}

.introduce {
  height: 200rpx;
}

.red {
  color: #ff0000;
  position: relative;
  top: 5rpx;
}

.img {
  width: 130rpx;
  height: 130rpx;
  margin-left: 30rpx;
}

.step2 {
  margin-left: 30rpx;
}

.step-list {
  margin-top: 20rpx;
}
</style>
